<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.outer {
				position: absolute;
				width: 200px;
				height: 200px;
				transform: rotate(65deg);
				clip: rect(0px, 100px, 200px, 0px);
				/* 这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，使用clip属性，元素必须是absolute的 */
				border-radius: 100px;
				background-color: #00FF00;
				/*-webkit-animation: an1 2s infinite linear;*/
			}
			
			.pie {
				position: absolute;
				width: 200px;
				height: 200px;
				transform: rotate(-65deg);
				clip: rect(0px, 100px, 200px, 0px);
				border-radius: 100px;
				background-color: #000000;
				/*-webkit-animation: an2 2s infinite linear;*/
			}
		</style>

	</head>

	<body>
		<div class="outer"></div>
		<!--<div class="pie"></div>-->
	</body>

</html>